<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="telphone">
                <el-input v-model="searchForm.telphone" clearable placeholder="用户手机号"></el-input>
            </el-form-item>
            <el-form-item prop="name">
                <el-input v-model="searchForm.name" clearable placeholder="真实姓名"></el-input>
            </el-form-item>
            <el-form-item prop="idcardNumber">
                <el-input v-model="searchForm.idcardNumber" clearable placeholder="用户身份证号"></el-input>
            </el-form-item>
           <el-form-item prop="time">
             <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="开始收益日期" end-placeholder="结束收益日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.levelId" size="small" @change="handleSearch()">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}</el-radio-button>
            </el-radio-group>
            <!-- <el-button type="primary" @click="handleAdd()" size="small" style="margin-left:15px" icon="el-icon-plus" v-has="'user:userEarnings:addit'">添加用户</el-button> -->
            <!-- <el-button type="primary" @click="handleAdd()" size="small" icon="el-icon-top">导入推荐加盟关系</el-button> -->
             <!-- <el-button
              style="margin-left:15px"
               type="warning"
               icon="el-icon-download"
               size="small"
               :loading="exportLoading"
               @click="handleExport"
               v-has="'user:userEarnings:input'"
             >导出</el-button> -->
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight" v-loading="loading"
            @selection-change="handleSelectionChange"  stripe>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="customerId" label="编号" v-if="!hideTableColumn.includes('number')"></el-table-column>
            <el-table-column prop="name" label="用户头像" v-if="!hideTableColumn.includes('img')">
              <template #default="scope">
                 <el-image :src="scope.row.userface" fit="fill" v-image-preview="scope.row.userface" class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="真实姓名" v-if="!hideTableColumn.includes('name')"></el-table-column>
            <el-table-column prop="idcard" label="身份证号" v-if="!hideTableColumn.includes('idCard')"></el-table-column>
            <el-table-column prop="bankName" label="开户行" v-if="!hideTableColumn.includes('openingBank')"></el-table-column>
            <el-table-column prop="bankNumber" label="银行账号" v-if="!hideTableColumn.includes('bankAccount')"></el-table-column>
            <el-table-column prop="levelName" label="加盟会员等级" v-if="!hideTableColumn.includes('level')"></el-table-column>
            <el-table-column prop="name" label="最新收益时间" v-if="!hideTableColumn.includes('time')">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.newEarningsTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="grossRevenueAmount" label="总收益金额" v-if="!hideTableColumn.includes('yseMoney')"></el-table-column>
            <!-- <el-table-column prop="profitAmount" label="交易收益总额 (元)" v-if="!hideTableColumn.includes('totalIncome')"></el-table-column>
            <el-table-column prop="profitUseAmount" label="交易收益可用额 (元)" v-if="!hideTableColumn.includes('totalYesIncome')"></el-table-column> -->
            <el-table-column prop="unionIncome" label="推荐收益总额 (元)" v-if="!hideTableColumn.includes('isYesAllMoney')"></el-table-column>
            <el-table-column prop="usableUnionIncome" label="可用推荐收益总额 (元)" v-if="!hideTableColumn.includes('yesAllMoney')"></el-table-column>


            <el-table-column prop="name" label="操作" width="140" fixed="right">
              <template #default="scope">
                  <el-button
                    v-if="scope.row.levelid!='1'"
                    size="medium"
                    type="text"
                    icon="el-icon-money"
                    @click="hanleUpMoneyApple(scope.row)"
                    v-has="'user:userEarnings:inc'"
                  >提额申请</el-button>
                  <Mention :id="scope.row.customerId" :statusRow="scope.row"  text="提额记录"></Mention>
                  <Earnings :id="scope.row.customerId" :statusRow="scope.row"  text="总收益记录"></Earnings>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
             v-show="total"
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>

    <!-- /*提额申请 */	 -->
    <el-dialog title="提额申请" width="600px" v-dialogDrag :visible.sync="upMoneyVisible" @close="upMoneyVisible = false" :close-on-click-modal="false" >
      <el-form  label-position="right" :model="upMoney" :rules="upMoneyRules" ref="upMoney">
          <el-form-item label="提取真实姓名:" label-width="175px">
            {{statusRow.name}}
          </el-form-item>
          <el-form-item label="手机号:" label-width="175px">
            {{statusRow.newEarningsTime}}
          </el-form-item>
          <el-form-item label="可用推荐收益总额:" label-width="175px">
            <span class="red">{{statusRow.usableUnionIncome}}</span>元
          </el-form-item>
          <el-form-item label="申请提取金额:" prop="money" label-width="175px">
            <el-input v-model="upMoney.money" clearable placeholder="申请提取金额" type="number"></el-input>
          </el-form-item>
          <el-form-item label="备注信息:" prop="remark" label-width="175px">
            <el-input v-model="upMoney.remark" clearable type="textarea" rows="4" placeholder="申请提取金额"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upMoneyVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSubmitupMoney('upMoney')" size="small" :loading="userLoading">提交申请</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getEarningsList,getMentionWithdraw,withdrawSave
  } from '@/api/getData'
  import option from '../../common/option.js';
  import Mention from '../user/components/mention';
  import Earnings from '../user/components/earnings';
  export default {
    components: {
      Mention,
      Earnings
    },
    data() {
      return {
        sta:true,
        loading: false,
        userLoading: false,
        userVisible:false,
        upMoneyVisible:false,
        exportLoading: false,
        time:[],
        searchForm: {
          telphone:'',
          name:'',
          levelId:'',
          idcardNumber:'',
          pageNum:1,
          pageSize:20,
        },
        levelList:[],
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'number'
        },{
            name:'用户头像',
            value:'img'
        },{
            name:'提现编码',
            value:'withdrawNumber'
        },{
            name:'真实姓名',
            value:'name'
        },{
            name:'身份证号',
            value:'idCard'
        },{
            name:'开户行',
            value:'openingBank'
        },{
            name:'银行账号',
            value:'bankAccount'
        },{
            name:'加盟会员等级',
            value:'level'
        },{
            name:'最新收益时间',
            value:'time'
        },{
            name:'总收益金额',
            value:'yseMoney'
        },{
            name:'交易收益总额 (元)',
            value:'totalIncome'
        },{
            name:'交易收益可用额 (元)',
            value:'totalYesIncome'
        },{
            name:'推荐收益总额 (元)',
            value:'isYesAllMoney'
        },{
            name:'可用推荐收益总额 (元)',
            value:'yesAllMoney'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        statusList: [{
          id: '1',
          name: '已实名'
        }, {
          id: '2',
          name: '未实名'
        }],
        dataList:[],
        total: 0,
        multipleSelection: '',
        dialogTitle: '',

        upMoney:{
          money:'',
          remark:''
        },
        upMoneyRules:{
          money: [{required: true, message: '申请提取金额不能为空',trigger: 'blur'}],
        },
        earningsVisible:false,
        earningsList:[],


        withdrawList:[],
        dialogTablePage:1,
        dialogTablePageTotal:5,//最多能滚动page
        dialogTableLoading:false,//弹框表格 正在加载
        dialogTableIsMore:false,//弹框表格 没有更多
        dialogStatus:'',        //弹框各个点击状态

      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
          this.loading = true;
          const result = await getEarningsList(data);
          if (result.code == 200) {
            this.total = result.total;
            let data = result.rows;
            data.map(item=>{
              item.status = item.status+'';
            })
            this.dataList = data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      getSelect(){
        this.getCategoryDetails({categoryKey:'member_level_category'}).then(res=>{ this.levelList = res.data; })
      },
      /*提额申请*/
      hanleUpMoneyApple(row){
        this.statusRow = row;
        this.upMoneyVisible = true;
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$modal.confirm('是否确认导出所有用户数据项？').then(() => {
          this.exportLoading = true;
          return exportUser(queryParams);
        }).then(response => {
          this.$download.name(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
      },
      handleDelt(id){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            lifeTestPaperupdateStatus({id:id}).then((result) => {
                  if (result.code == '200') {
                       this.dataInfo();
                       this.$message({
                           message: result.message,
                           type: 'success'
                         });
                   }else{
                      this.$message.error(result.message);
                   }
               });
          }).catch(() => {
              console.log(1);
          });
      },

      handleSubmitupMoney(formName) {
        /*提额申请*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.statusRow.usableUnionIncome<this.upMoney.money){
               this.$message.error('申请提取金额不能大于'+this.statusRow.usableUnionIncome);
              return;
            }
            this.userLoading = true;
            let data = {
              total:this.upMoney.money,
              remarks:this.upMoney.remark,
              customerId:this.statusRow.customerId
            }
            withdrawSave(data).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.upMoneyVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(page) {
        this.page = page;
        this.dataInfo()
      },
      handleSizeChange(val) {
        this.limit = val;
        this.dataInfo();
      },

    }
  }
</script>

<style scoped lang="scss">
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
